<template>
  <div
    v-for="(item, index) in data"
    :key="index"
  >
    <select v-model="item.value">
      <option
        v-for="opt in opts"
        :key="opt.value"
        :value="opt.value"
      >
        {{ opt.label }}
      </option>
    </select>
    <!-- 第二个 -->
    <template v-if="['1'].includes(item.value)">
      <input
        v-model="item.input"
        type="text"
        placeholder="请输入内容111"
      />
    </template>
    <template v-if="['2'].includes(item.value)">
      <input
        v-model="item.input"
        type="text"
        placeholder="请输入内容222"
      />
    </template>
    <template v-if="['3'].includes(item.value)">
      <input
        v-model="item.input"
        type="text"
        placeholder="请输入内容33"
      />
    </template>
    <!-- 第三个 -->
    <template v-if="['11'].includes(item.input)">
      <input
        v-model="item.str"
        type="text"
        placeholder="请输入内容444"
      />
    </template>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";

interface conditionsMap {
  value: string;
  input?: string;
  str?: string;
}
interface Condition {
  conditions: conditionsMap[];
}
interface Props {
  filter: Condition;
}

const props = withDefaults(defineProps<Props>(), {
  filter: () => {
    return { conditions: [] };
  },
});
const data = ref(props.filter);
const opts = ref([
  { label: "选项1", value: "1" },
  { label: "选项2", value: "2" },
  { label: "选项3", value: "3" },
]);
</script>
